<template>
    <div class="householdAdd">
        <div class="tops">
            <Breadcrumb />
            <h3>新建住户</h3>
        </div>
        <div class="contents">
            <el-form ref="ruleFormRef" style="max-width: 427px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="关联房屋" prop="name">
                    <el-select v-model="ruleForm.region" placeholder="请选择房屋">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="住户姓名" prop="region">
                    <el-input v-model="ruleForm.name" placeholder="请输入" />

                </el-form-item>
                <el-form-item label="住户编号" prop="count">
                    <el-input v-model="ruleForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="住户性别">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio value="Sponsorship">男</el-radio>
                        <el-radio value="Venue">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="证件类型" prop="count">
                    <el-select-v2 v-model="ruleForm.count" placeholder="请选择" :options="options" />
                </el-form-item>
                <el-form-item label="证件号码" prop="count">
                    <el-input v-model="ruleForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="与业主关系" prop="count">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" prop="count">
                    <el-input v-model="ruleForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="身份证正面照" prop="count">
                    <div class="boxs">
                        点击上传
                    </div>
                </el-form-item>
                <el-form-item label="身份证背面照" prop="count">
                    <div class="boxs">
                        点击上传
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        提交
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue';
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    location: string
    type: string[]
    resource: string
    desc: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    location: '',
    type: [],
    resource: '',
    desc: '',
})


const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    location: [
        {
            required: true,
            message: 'Please select a location',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    // if (!formEl) return
    // await formEl.validate((valid, fields) => {
    //     if (valid) {
    //         console.log('submit!')
    //     } else {
    //         console.log('error submit!', fields)
    //     }
    // })
    ElMessage({
        message: '提交成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
            router.go(-1)
        }
    })

}

const resetForm = (formEl: FormInstance | undefined) => {
    router.go(-1)
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<style scoped>
@import '@/assets/Data/dataadmin.css';
</style>